<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RTM Charts</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

</head>
	
	
	

<body>
	<script type="text/javascript">
		Date.prototype.addHours = function(h) {
		this.setTime(this.getTime() + (h*60*60*1000));
		return this;
		};

		var fnConvertDate = function(msDotNetJsonDateString){
		return new Date(parseInt(msDotNetJsonDateString.replace("/Date(", "").replace(")/",""), 10)).addHours(5)
		};

		google.load('visualization', '1.0', { 'packages': ['corechart'] });



		$.ajax({
		url: 'http://jonhoguet.com/rtm/rtmmetrics.svc/GetWeeksHoursRemaining'
		,contentType: 'application/json'
		,method: 'GET'
		,dataType: 'json'
		,success: function(arg1, arg2, arg3){
		var metrics = arg1.GetWeeksHoursRemainingResult;
		$.each(metrics, function(index, element){
		metrics[index] = [fnConvertDate(element.Context), element.Value];
		//metrics[index] = [eval("new " + element.Context.slice(1,-1)), element.Value];
		//metrics[index] = [new Date(parseInt(element.Context.slice(6, element.Context.length - 2))), element.Value];
		});
		setTimeout( function(){
		// Create the data table.
		var data = new google.visualization.DataTable();
		data.addColumn('date', 'Task Date');
		data.addColumn('number', 'HoursRemaining');
		data.addRows(metrics);

		// Set chart options
		var options = { 'title': 'RTM Hours Remaining'
		,'width': 600
		,'height': 300
		, legend: {position: 'none'}
		};
		var formatter = new google.visualization.DateFormat({pattern: 'E d'});
		formatter.format(data, 0);
		// Instantiate and draw our chart, passing in some options.
		var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
		chart.draw(data, options);

		$('#dayEnding_div').append('Can finish by: ' + new Date().addHours(metrics[0][1]).toLocaleTimeString());
		}
		,1000);

		}
		,error: function(){


		}
		});
	</script>
	<div id="chart_div"></div>
	<div id="dayEnding_div"></div>
</body>

</html>
